<template>
  <div class="Slider">
    <div class="verifySlider" ref="verifySlider" onselectstart="return false;">
      <div class="bgColor" ref="bgColor"></div>
      <div class="txt" ref="txt">请滑动验证</div>
      <div class="slider" ref="slider" @mousedown="mousedownHandler">
        <i class="iconfont el-icon-d-arrow-right" ref="iconfont"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Slider",
  
  data() {
    return {
      box: 0, // 容器
      bgColor: 0, // 背景色
      txt: 0, // 文本
      slider: 0, // 滑块
      icon: 0, // 图标
      successMoveDistance: 0, // 验证需要滑动的距离
      downX: 0, // 用于存放鼠标按下时的位置
      // isSuccess: false, // 是否验证成功的标志，默认不成功
    };
  },

  created(){
    this.$store.state.isSuccess = false;
  },

  mounted() {
    this.Slider();
  },

  methods: {
    
    // 获取滑块节点
    Slider() {
      this.box = this.$refs.verifySlider; // 容器
      this.bgColor = this.$refs.bgColor; // 背景色
      this.txt = this.$refs.txt; // 文本
      this.slider = this.$refs.slider; // 滑块
      this.icon = this.$refs.iconfont; // 图标
      this.successMoveDistance = this.box.offsetWidth - this.slider.offsetWidth; // 验证需要滑动的距离
    },

    // 鼠标按下事件的方法实现
    mousedownHandler(e) {
      console.log(this.$store.state.isSuccess)
      if (this.$store.state.isSuccess) {
        return;
      }
      this.bgColor.style.transition = "";
      this.slider.style.transition = "";
      var e = e || window.event || e.which;
      this.downX = e.clientX;
      //在鼠标按下时，分别给鼠标添加移动和松开事件
      this.slider.onmousemove = this.mousemoveHandler;
      this.slider.onmouseup = this.mouseupHandler;
    },

    // 定义一个获取鼠标当前需要移动多少距离的方法
    getOffsetX(offset, min, max) {
      if (offset < min) {
        offset = min;
      } else if (offset > max) {
        offset = max;
      }
      return offset;
    },

    // 鼠标移动事件的方法实现
    mousemoveHandler(e) {
      var e = e || window.event || e.which;
      var moveX = e.clientX;
      var offsetX = this.getOffsetX(
        moveX - this.downX,
        0,
        this.successMoveDistance
      );
      this.bgColor.style.width = offsetX + "px";
      this.slider.style.left = offsetX + "px";

      if (offsetX == this.successMoveDistance) {
        this.success();
      }
      //如果不设置滑块滑动时会出现问题（目前还不知道为什么）
      e.preventDefault();
    },

    // 鼠标松开事件的方法实现
    mouseupHandler(e) {
      if (!this.$store.state.isSuccess) {
        this.bgColor.style.width = 0 + "px";
        this.slider.style.left = 0 + "px";
        this.bgColor.style.transition = "width 0.8s linear";
        this.slider.style.transition = "left 0.8s linear";
      }
      this.slider.onmousemove = null;
      this.slider.onmouseup = null;
    },

    // 定义一个滑块验证成功的方法
    success() {
      this.$store.state.isSuccess = true;
      console.log(this.$store.state.isSuccess)
      this.txt.innerHTML = "验证成功";
      this.bgColor.style.backgroundColor = "#00b16a";
      this.slider.className = "slider active";
      this.icon.className = "iconfont el-icon-circle-check";
      this.slider.style.cursor = "auto";
      //滑动成功时，移除鼠标按下事件和鼠标移动事件
      this.slider.onmousedown = null;
      this.slider.onmousemove = null;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/less/variable.less";
.Slider{
  .verifySlider{
        position: relative;
        width: 100%;
        height: 40px;
        margin: 0 auto;
        background-color: #e8e8e8;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
        margin-bottom: 10px;
    }

    .bgColor{
        position: absolute;
        left:0;
        top:0;
        width:40px;
        height: 40px;
        background-color: @theme;
    }
    .txt{
        position: absolute;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #000;
        text-align: center;
    }
    .slider{
        position: absolute;
        left:0;
        top:0;
        width: 50px;
        height: 38px;
        border: 1px solid #ccc;
        background: #fff;
        text-align: center;
        cursor: move;
        >i{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
    }
}
</style>